<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Shopping Cart</title>
</head>
<body>
<header th:replace="common/top"></header>
<!-- 返回主菜单 -->
<div id="BackLink">
  <a th:href="@{/catalog/index}">Return to Main Menu</a>
</div>

<div id="Catalog">
  <div id="Cart">
    <h2>Shopping Cart</h2>

    <!-- 购物车商品表单 -->
    <form th:action="@{/cart/updateCart}" method="post">
      <table>
        <tr>
          <th>Item ID</th>
          <th>Product ID</th>
          <th>Description</th>
          <th>In Stock?</th>
          <th>Quantity</th>
          <th>List Price</th>
          <th>Total Cost</th>
          <th>&nbsp;</th>
        </tr>

        <!-- 购物车为空时显示 -->
        <tr th:if="${cartItems == null or cartItems.isEmpty() == 1}">
          <td colspan="8"><b>Your cart is empty.</b></td>
        </tr>

        <!-- 遍历购物车商品 -->
        <tr th:each="cartItem : ${cartItems}">
          <td>
            <a th:href="@{/viewItem(itemId=${cartItem.itemId})}" th:text="${cartItem.itemId}"></a>
          </td>
          <td th:text="${cartItem.item.productId}"></td>
          <td>
            <span th:text="${cartItem.item.attribute1}"></span>
            <span th:text="${cartItem.item.attribute2}"></span>
            <span th:text="${cartItem.item.attribute3}"></span>
            <span th:text="${cartItem.item.attribute4}"></span>
            <span th:text="${cartItem.item.attribute5}"></span>
            <!-- 通过 productId 查找 product.name -->
            <span th:text="${cartItem.item.productId != null ? products[cartItem.item.productId].productName : '未知商品'}"></span>
          </td>
          <td>
            <input type="text" th:id="|quantity_${cartItem.itemId}|"
                   th:onchange="updateCart(this.getAttribute('data-item-id'))"
                   th:name="${cartItem.itemId}"
                   th:value="${cartItem.number}">
          </td>
          <td th:text="${#numbers.formatCurrency(cartItem.item.listPrice)}"></td>
          <!-- 计算 total：数量 * 单价 -->
          <td th:id="|total_${cartItem.itemId}|"
              th:text="${#numbers.formatCurrency(cartItem.number * cartItem.item.listPrice)}">
          </td>
          <td>
            <a th:href="@{/cart/removeCartItem(workingItemId=${cartItem.itemId})}" class="Button">Remove</a>
          </td>
        </tr>

        <!-- 计算并显示小计 -->
        <tr>
          <td colspan="4">总计：</td>
          <td th:text="${subTotal}"></td>
        </tr>
      </table>
    </form>

    <!-- 可用优惠券 -->
    <span id="couponNotice"></span>
    <form>
      <h2>Available Coupons</h2>
      <table>
        <tr>
          <th>Coupon ID</th>
          <th>Limit</th>
          <th>Deduction</th>
          <th>Discount</th>
          <th></th>
        </tr>

        <!-- 如果没有优惠券 -->
        <tr th:if="${couponList == null or couponList.isEmpty()}">
          <td colspan="5"><b>Your coupon package is empty.</b></td>
        </tr>

        <!-- 遍历优惠券 -->
        <tr th:each="coupon : ${couponList}"
            th:if="${coupon.limit != null and subTotal != null and coupon.limit <= subTotal}">
          <td th:text="${coupon.id}"></td>
          <td th:text="${coupon.limit}"></td>
          <td th:text="${coupon.deduction}"></td>
          <td th:text="${coupon.discount}"></td>
          <td>
            <input type="radio" name="selectCoupon" th:value="${coupon.id}"
                   th:checked="${selectedCouponId != null and selectedCouponId == coupon.id}"
                   onclick="showCoupon(this);"> Yes
          </td>
        </tr>

        <!-- 没有符合的优惠券 -->
        <tr th:if="${couponList != null and couponList.size() > 0 and subTotal < couponList[0].limit}">
          <td colspan="5">No available coupons. You can purchase more to reach the lower limit of the coupon.</td>
        </tr>
      </table>
    </form>

    <!-- 结账按钮 -->
    <a th:href="@{/cart/checkoutForm(username=${session.loginAccount.username})}" class="Button">Proceed to Checkout</a>
  </div>

  <!-- 用户喜欢的商品 -->

  <div id="MyList" th:if="${loginAccount != null and loginAccount.listOption != null and loginAccount.listOption == 1}">
    <th:block th:replace="catalog/includeMyList :: myList"></th:block>
  </div>

  <div id="Separator">&nbsp;</div>
</div>

<!-- 相关 JS -->
<script th:src="@{/js/account.js}"></script>
<script th:src="@{/js/updateCart.js}"></script>

</body>
</html>